<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body id="back">
<style>
    #back {
        background-image: url("../images/img_2.png");
        background-size: cover;
        width: 100%;
        height: 100vh;
        display: grid;
        place-items: center;

    }
    #login {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        width: 300px;
        padding: 20px;
        background: #c6fff6;
        border-radius: 4px;
        padding: 20px 20px 20px 40px; /* 增加左边距 */
    }
    #danger {
        color: black;
    }
</style>

<div id="app">
    <div id="login">
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
            <el-form-item>
                <span id="danger">请输入</span>
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="formLabelAlign.username" @blur="checkUsername" @focus="mover"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formLabelAlign.password"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <template>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register">注册</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
                <el-link type="primary" href="login.html">返回？</el-link>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                labelPosition: 'left',
                formLabelAlign: {
                    username: '',
                    password: '',
                    phone: '',
                    address: '',
                },
                options: [{
                    value: 'MAN',
                    label: '男'
                }, {
                    value: 'WOMAN',
                    label: '女'
                }],
                value: ''
            };
        },
        methods: {
            mover() {
                document.getElementById("danger").innerHTML = '请输入';
                document.getElementById('danger').style.color = 'black';
            },
            checkUsername() {
                var _this = this;
                axios({
                    method: 'get',
                    url: '/register?username=' + encodeURIComponent(_this.formLabelAlign.username),
                })
                    .then(function (response) {
                        if (response.data.code== 400) {
                            document.getElementById("danger").innerHTML = '该账号已存在';
                            document.getElementById('danger').style.color = 'red';
                        }
                    })
            },
            register() {
                var _this = this;
                if(document.getElementById("danger").innerHTML=='该账号已存在'){
                    alert("当前账号已存在，请重新输入")
                    return;
                }
                axios({
                    method: 'post',
                    url: '/register',
                    data:{
                        username:_this.formLabelAlign.username,
                        password:_this.formLabelAlign.password,
                        identify: "USER",
                        phone:_this.formLabelAlign.phone,
                        address:_this.formLabelAlign.address,
                        sex: _this.value
                    }
                })
                    .then(function (response) {
                        if (response.data.code ==402 ) {
                            alert("注册成功");
                        } else {
                            alert("注册失败");
                        }
                    })
                    .catch(function (error) {
                        console.error('Error:', error);
                    });
            },
            reset() {
                this.formLabelAlign.username = '';
                this.formLabelAlign.password = '';
                this.formLabelAlign.confirmpassword = '';
                this.formLabelAlign.address='';
                this.formLabelAlign.phone='';
            },
        },
    });
</script>
</body>
</html>